<template>
  <DefaultLayout>
    <div class="space-y-8">
      <h1 class="text-4xl font-bold">实战案例</h1>
      
      <!-- 案例列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div v-for="item in cases" :key="item.id" class="card">
          <div class="flex items-start space-x-4">
            <div class="flex-shrink-0">
              <img :src="item.icon" :alt="item.title" class="w-16 h-16 rounded-lg" />
            </div>
            <div class="flex-1">
              <h2 class="text-2xl font-semibold mb-2">{{ item.title }}</h2>
              <p class="text-gray-600 mb-4">{{ item.description }}</p>
              <div class="flex flex-wrap gap-2 mb-4">
                <span
                  v-for="tag in item.tags"
                  :key="tag"
                  class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"
                >
                  {{ tag }}
                </span>
              </div>
              <router-link :to="`/cases/${item.id}`" class="text-primary hover:underline">
                查看详情 →
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DefaultLayout>
</template>

<script setup lang="ts">
import DefaultLayout from '../layouts/DefaultLayout.vue'

const cases = [
  {
    id: 1,
    title: '使用 AI 重构遗留代码',
    description: '通过 Cursor 的 AI 功能，成功重构了一个复杂的遗留系统，提高了代码质量和可维护性。',
    icon: '/images/case-1.jpg',
    tags: ['AI', '重构', '最佳实践']
  },
  {
    id: 2,
    title: '快速开发 API 服务',
    description: '利用 Cursor 的代码生成功能，在短时间内完成了 RESTful API 服务的开发。',
    icon: '/images/case-2.jpg',
    tags: ['API', '开发效率', '代码生成']
  },
  {
    id: 3,
    title: '自动化测试实践',
    description: '使用 Cursor 的 AI 辅助功能，快速编写和优化自动化测试用例。',
    icon: '/images/case-3.jpg',
    tags: ['测试', '自动化', '质量保证']
  }
]
</script> 